import React, { useEffect, useState } from 'react';
import { Card, Form, Button, Divider, Descriptions, Table } from 'antd';
import { connect } from 'dva';
import FooterToolbar from '@/components/FooterToolbar';
import ObjFlowExecView from '@/pages/FlowComp/ObjFlowExecView';
import request from '@/utils/request';

// const { Step } = Steps;

function OperView({ size: { height }, goToStep, orderId }) {
  const [loading, setLoading] = useState(false);
  const [info, setOrderWorkInfo] = useState([]);
  const getOrderWork = () => {
    setLoading(true);
    request('pmc/pms/PmOrderWorkController/get', {
      data: {
        orderId: orderId,
      },
    }).then(res => {
      setOrderWorkInfo(res.data);
      setLoading(false);
    });
  };
  useEffect(() => {
    getOrderWork();
  }, []);

  const columns = [
    {
      title: '环节编码',
      dataIndex: 'flowNodeCode',
      ellipsis: true,
    },
    {
      title: '环节名称',
      dataIndex: 'flowNodeName',
      ellipsis: true,
    },
    {
      title: '开始时间',
      dataIndex: 'createDateStr',
      align: 'center',
    },
    {
      title: '结束时间',
      dataIndex: 'statusDateStr',
      align: 'center',
    },
  ];
  return (
    <div>
      <Card title="流程实例详情" style={{ minHeight: height, paddingBottom: 40 }}>
        <div className="ant-detail-title">流程详情</div>
        <Descriptions column={3}>
          <Descriptions.Item label="流程名称">{info.orderName}</Descriptions.Item>
          <Descriptions.Item label="流程编码">{info.orderNumber}</Descriptions.Item>
          <Descriptions.Item label="流程类型">{info.flowDefName}</Descriptions.Item>
          <Descriptions.Item label="流程实例标识">{info.flowInstId}</Descriptions.Item>
          <Descriptions.Item label="流程状态">{info.statusCdName}</Descriptions.Item>
          <Descriptions.Item label="流程版本">{info.version}</Descriptions.Item>
          <Descriptions.Item label="开始时间">{info.createDateStr}</Descriptions.Item>
          <Descriptions.Item label="结束时间">{info.statusDateStr}</Descriptions.Item>
        </Descriptions>
        <Divider className="small" />
        <ObjFlowExecView orderId={orderId} />
      </Card>
      <FooterToolbar>
        <Button type="primary" onClick={() => goToStep(1)}>
          返回
        </Button>
      </FooterToolbar>
    </div>
  );
}
// export default OperView;
export default connect(({ setting }) => ({
  size: setting.size,
}))(Form.create()(OperView));
